import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { Form } from "antd-mobile";
import { WxButton } from "@/components/WCStylecomponents";
import React from "react";
import { HeartFill } from "antd-mobile-icons";
import { message } from "antd";
Form.displayName = "Form";
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: "WxComponents/WxButton",
  component: WxButton,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: "centered",
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  //tags: ["autodocs"],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {},
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: {},
} satisfies Meta<typeof WxButton>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Basic: Story = {
  args: {
    placeholder: "地点",
  },
  render: function Render({ value, placeholder }) {
    return (
      <Form>
        <Form.Item name={"location"}>
          <WxButton value={value} placeholder={placeholder}></WxButton>
        </Form.Item>
      </Form>
    );
  },
};

export const BasicWithValue: Story = {
  args: {
    placeholder: "地点",
    value: ["江苏省", "南京市"],
  },
  render: function Render({ value, placeholder }) {
    return (
      <Form>
        <Form.Item name={"location"} initialValue={value}>
          <WxButton placeholder={placeholder}></WxButton>
        </Form.Item>
      </Form>
    );
  },
};
export const NoIcon: Story = {
  args: {
    prevIcon: null,
    backIcon: null,
    value: ["确认"],
  },
};
export const CustomIcon: Story = {
  args: {
    prevIcon: <HeartFill />,
    value: ["确认"],
  },
};
export const ClickEvent: Story = {
  args: {
    value: ["确认"],
    onClick: () => {
      message.info("do some effect");
    },
  },
};
